<template>
    <div class="sign">
        <div class="sign_bg">
         	<span class="f52 jf" id="upoints">当前积分：{{nowScore}}</span>
         	<span class="sign_gz">
                <!-- <img class="icon" src="./../../assets/images/icon_gz.png"> -->
                <!-- <a id="rule">签到规则</a> -->
            </span>
         	<div class="sign_inner" @click="signC(isSign)">
         		<div class="sign_j">
         			<div class="sign_btn" id="signin">
                        <span onclick="return false;"><b v-if="isSign">已签到</b><b v-else>签到</b></span>
                    </div>
        	 	    <p>共签到<span id="red">{{signDays}}</span>天</p>
         		</div>
         	</div>
         	<span class="sign_c"></span>
         	<div class="sign_bot">
        	 	<ul>
                    <li v-for="item in dataList" v-bind:class="{day:item.checked}">
                        <span class="sign" v-if="item.checked">
                            <img src="./../../assets/images/gou.png" style="width: 120%;">
                        </span>
                        <span class="sign" v-else>
                            <img src="./../../assets/images/yuan.png" style="width: 90%;padding-top: 0.1rem;">
                        </span>
                        <span class="mr">{{item.data}}</span>
                    </li>
        	 	</ul>
         	</div>
        </div>
        <div class="rule-sign">
            <ol>
        		<li>1.每日签到即可获得10积分;</li>
        		<!-- <li>2.若连续签到7天，则在第7天时可额外获得15积分奖励;</li> -->
        		<!--<li>3.连续签到记录在第8天开始时将清零重新计算;</li>
        		<li>4.签到赠送的畅由积分，有效期为一个月;</li>-->
		        <li>5.五颗豆子保留此次活动的最终解释权;</li>
        		<li style="text-align: center;margin-top: 0.4rem;margin-bottom: 0.4rem;font-size: 0.32rem;">记得每天都要来签到哦~</li>
         	</ol>
        </div>
    </div>
</template>
<script>
    import Sign from "../../service/sign";
    import Mint from "mint-ui";
    export default {
        data(){
            return {
                nowScore:"10",
                signDays:0,
                isSign:true,
                openid:window.sessionStorage.getItem("beansOpenid"),
                dataList:[
                    {data:"12-30",checked:true},
                    {data:"12-31",checked:true},
                    {data:"1-1",checked:false},
                    {data:"1-2",checked:false},
                    {data:"1-3",checked:false},
                    {data:"1-4",checked:false},
                    {data:"1-5",checked:false}
                ]
            }
        },
        mounted(){
            Sign.isCheckIn({openid:this.openid})
            .then(data => {
                if(data.code == "201") {
                	this.isSign = data.info.isCheckIn;
                	this.signDays = data.info.checkTime;
                    this.nowScore = data.info.addScore;
                }
            })
        },
        methods:{
            signC(i){
            	if(i){
            		Mint.Toast("你今天已签到");
            	} else {
            		Sign.CheckIn({openid:this.openid})
	                .then(data => {
						this.isSign = true;
						this.signDays = parseInt(this.signDays)+1;
						this.nowScore = this.nowScore  + data.info.addScore;
	                });
            	}

            }
        }
    }
</script>

<style lang="scss">
    .sign_bg {
        position: relative;
        background: url(./../../assets/images/bj22.png) no-repeat;
        width: 100%;
        height: 7rem;
        background-size: 100% 100%;
        line-height: 0.32rem;
        .jf {
            font-size: 0.32rem;
            color: white;
            padding-top: 0.39rem;
            padding-left: 0.29rem;
            display: inline-block!important;
        }
        .f52 {
            font-size: 0.52rem;
            margin-bottom: 0.1rem;
            display: block;
        }
        .icon {
            right: 1.7rem;
            width: 0.26rem;
            position: absolute;
            margin-top: 0.4rem;
        }

        #rule {
            font-size: 0.32rem;
            color: #fff;
            padding-top: 0.39rem;
            padding-right: 0.29rem;
            text-decoration: none;
        }
        .sign_gz a {
            color: #fff;
            text-decoration: underline;
            font-size: 0.28rem;
            display: block;
            text-align: right;
            padding-right: 0.3rem;
            float: right;
            padding-top: 0.2rem;
        }
        .sign_inner {
            padding-top: 0.8rem;
            margin-left: 2.18rem;
            margin-right: 2.18rem;
            .sign_j {
                width: 3rem;
                height: 3rem;
                background: url(./../../assets/images/bigyuan.png) center;
                background-size: 130% 130%;
                color: #a82504;
                font-size: 0.24rem;
                text-align: center;
                padding-top: 1rem;
                margin: -0.6rem auto;
            }
            .sign_btn {
                width: 3rem!important;
                font-size: 0.68rem;
                font-weight: 200!important;
                height: 0.64rem;
                margin-left: auto;
                margin-right: auto;
                background-size: 100% 100%;
                font-size: 0.64rem;
                line-height: 0.64rem;
                text-align: center;
                color: #ff670c !important;

            }
            .sign_j p {
                color: #ff670c;
                font-size: 0.32rem;
                margin-top: 0.25rem;
            }
        }
        .sign_c {
            display: block;
            font-size: 0.28rem;
            color: #7d4d0d;
            width: 100%;
            text-align: center;
            margin-top: 0.8rem;
        }
        .sign_bot {
            background: url(./../../assets/images/qiandao_beijing.png) no-repeat;
            background-position-y: 0.57rem;
            background-size: 100% 0.1rem;
            padding: 0!important;
            height: 1.2rem;
            text-align: center;
            display: none;
            ul {
                padding: 0 0 0.3rem 0;
                margin: 0;
                li {
                    list-style: none;
                    width: 13.4%;
                    float: left;
                    font-size: 0.2rem;
                    color: #fad06b;
                    text-align: center;
                    padding-bottom: 0.2rem;
                    .sign {
                        display: block;
                        width: 0.5rem;
                        height: 0.5rem;
                        margin: 0.3rem auto;
                        img {
                            margin-right: -0.45rem;
                        }
                    }
                    .mr {
                        margin-right: -0.5rem;
                    }
                }
                li.day {
                    background: url(./../../assets/images/baitiao.png) no-repeat;
                    background-position-y: 0.57rem;
                    background-size: 100% 0.1rem;
                    color: #fff;
                }
            }
        }
    }
    .rule-sign {
        margin-top: .5rem;
        ol {
            font-size: 0.36rem;
            padding-left: .4rem;
            li{
                color:#fdab11
            }
        }

    }
    b,
    p,
    span#red {
        color: #ff670c !important;
    }
    span.mr {
        color:#fad06b
    }
    li.day span.mr {
        color:#fff;
    }
</style>
